<template>
    <div>
        <div class="infoBox" @click="router.push('/info')">
            <div class="inTop">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.LI1S5RYnCvJmMuDAWxB-BgHaHa?w=206&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                    style="width: 70px; height: 70px; border-radius: 50%" />
                <div class="info">
                    <h4>张三</h4>
                    <!-- 在本地存储获取消费总金额，并进行渲染对应图标 -->
                    <div class="inRight0" v-show="level === 0">
                        <img src="./state/等级0.svg" alt="" style="width: 35%;">
                        <span>LV1 新手</span>
                    </div>
                    <div class="inRight" v-show="level === 1">
                        <img src="./state/等级1.svg" alt="" style="width: 35%;">
                        <span>LV2 熟练</span>
                    </div>
                    <div class="inRight" v-show="level === 2">
                        <img src="./state/等级2.svg" alt="" style="width: 35%;">
                        <span>LV3 精英</span>
                    </div>
                    <div class="inRight3" v-show="level >= 3">
                        <img src="./state/等级3.svg" alt="" style="width: 35%;">
                        <span>LV4 星钻</span>
                    </div>
                </div>
            </div>
            <div class="inBot">
                <div class="botLeft">
                    <p class="num">0</p>
                    <p>关注</p>
                </div>
                <div class="botMidd">
                    <p class="num">0</p>
                    <p>粉丝</p>
                </div>
                <div class="botRight">
                    <p class="num">0</p>
                    <p>被赞</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
let level = ref(4)
let obj = ref({})
const getUserInfo = () => {
    console.log('获取用户数据');
    // let id = localStorage.getItem('id')
    // axios.get(`http://localhost:3000/info/?id=${id}`).then(res=>{
    //     obj.value = res.data.obj
    // }).catch(err=>{
    //     console.log(err)
    // })
}
onMounted(() => {
    getUserInfo()
})
</script>

<style scoped>
.botLeft .botMidd .botRight {
    text-align: center;
}
.num {
    text-align: center;
    font-weight: 600;
    font-size: large;
    position: relative;
    top: 10px
}

/*关注/粉丝/被赞*/
.inBot {
    color: white;
    width: 100%;
    /*height: 500px;*/
    display: flex;
    position: absolute;
    bottom: 0px;
    justify-content: space-around;
}

.infoBox {
    width: 90%;
    background-image: linear-gradient(to bottom right, #008674, #9ebcb4);
    margin: 0 auto;
    height: 160px;
    border-radius: 10px;
    position: relative;
}

/*用户头像+昵称+等级*/
.inTop {
    width: 100%;
    display: flex;
    padding: 10px;
}

/*昵称+等级*/
.info {
    margin-left: 20px;
    color: white;
}

/*一级会员字体颜色*/
.inRight0 {
    color: black;
}

/*三级会员字体颜色*/
.inRight3 {
    color: rgb(241, 2, 2);
}

/*用户名称*/
.info h4 {
    font-size: large;
    line-height: 0px;
}

/*会员等级*/
.info span {
    font-family: "黑体";
    font-weight: 600;
    position: relative;
    left: -55px;
    top: -6px;
    font-size: smaller;
}
</style>
